<template>
  <!-- 运行结果-查看影响数据 -->
  <div class="effect-data">
    <el-row class="ruleResult container">
      <el-col style="margin-right:10px;" class="content-left">
        <!-- 操作区域 -->
        <div style="display:flex;justify-content:space-between;height:32px;margin-bottom:10px;">
            <!-- 左侧按钮 -->
            <div>
                <el-button @click="searchBtn">搜索</el-button>
            </div>
            <!-- 右侧按钮 -->
            <div></div>
        </div>
        <div style="height:450px">
          <el-table ref="multipleEffectTable" :data="tableEffectData" style="width: 100%" @row-click="authorizeForEffectTable">
            <el-table-column
              width="55"
              type="selection"
              
            ></el-table-column>
            <el-table-column
              prop="ruleCode"
              label="规则编码"
               show-overflow-tooltip
              v-if="columnEffectState[0]"
            >
            </el-table-column>
            <el-table-column
              label="规则名称 "
               show-overflow-tooltip
              v-if="columnEffectState[1]"
              :formatter="ruleNameFormatter"
            >
            </el-table-column>

            <el-table-column
              prop="yearId"
               show-overflow-tooltip
              label="年份 "
              v-if="columnEffectState[2]"
            >
            </el-table-column>

            <el-table-column
              prop="orgName"
              label="机构 "
               show-overflow-tooltip
              v-if="columnEffectState[3]"
            >
            </el-table-column>
            <el-table-column
              prop="driverCode"
              label="动因 "
               show-overflow-tooltip
              v-if="columnEffectState[4]"
            >
            </el-table-column>
            <el-table-column prop="amount" label="金额 "  show-overflow-tooltip  v-if="columnEffectState[5]">
            </el-table-column>
          </el-table>
          <pagination
            @size-change="handleEffectSizeChange"
            @current-change="handleEffectCurrentChange"
            :current-page="searchEffectForm.page"
            :page-size="searchEffectForm.size"
            @refresh="searchEffectFunc"
            :total="effectTotal"
          ></pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog v-dialogDrag
                append-to-body
                title="搜索"
                :visible.sync="searchDialog"
                width="400px"
                top="3%">
        <el-form
              :model="searchEffectForm"
              ref="searchEffectForm"
              label-width="87px"
              label-position="left"
              size="mini"
            >
              <el-form-item label="年份：">
                <el-input
                  v-model="searchEffectForm.yearId"
                  style="width:180px"
                ></el-input>
              </el-form-item>
              <el-form-item label="机构：">
                <div class="treeBoxBig">
                  <div class="treeBox" >{{ showValue }}</div>
                  <div class="treeBtnCS" @click="treeBtn"></div>
                </div>
                <div v-if="toShowMemberTree">
                <memberAndTree
                  ref="memberAndTree"
                  :toShowMemberTree="toShowMemberTree"
                  v-model="searchEffectForm.org"
                  :dictCode="dictCode"
                  :indexItems="indexItems"
                  :itemData="itemData"
                  @selectDataFunc="selectDataFunc"
                ></memberAndTree>
                </div>
              </el-form-item>
              <el-form-item label="金额：">
                <el-input
                  v-model="searchEffectForm.amount"
                  style="width:180px"
                ></el-input>
              </el-form-item>
            </el-form>
        <div slot="footer">
            <el-button @click="confirmTne">确 定</el-button>
            <el-button @click="cancelTne">重 置</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { ruleResult } from "@/api/index";
import upperTemplate from "@/components/upperTemplate.vue"
import onlyOneSearch from "@/components/onlyOneSearch";
import memberAndTree from '@/components/ca/memberAndTree'
import moment from "moment";
export default {
  data() {
    return {
      // 列隐藏依据数据
      textEffectData: [
        { prop: "ruleCode", label: "规则编码", disabled: true },
        { prop: "ruleName", label: "规则名称", disabled: true },
        { prop: "yearId", label: "年份", disabled: true },
        { prop: "orgName", label: "机构", disabled: true },
        { prop: "driverType", label: "动因", disabled: true },
        { prop: "amount", label: "金额", disabled: true }
      ],
      // 显示的列
      checkEffectList: [],
      //查询时默认条件
      searchEffectForm: {
        page: 1,
        size: 15,
        yearId: "",
        org: "",
        amount: ""
      },
      //总条数
      effectTotal: 0,
      tableEffectData: [],
      //机构树参数
      toShowMemberTree: false,
      dictCode: 'OrganUnit',
      indexItems: 0,
      itemData: [],
      showValue: '',
      searchDialog: false
    };
  },
  props: {
    batchId: {
      type: String,
      default: ""
    },
    ruleName: {
      type: String,
      default: ""
    }
  },
  watch: {
    batchId: function(newVal, oldVal) {
      this.batchId = newVal;
      newVal&&this.searchEffectFunc();
    },
    ruleName: function(newVal, oldVal) {
      this.ruleName = newVal;
    }
  },
  components: {
    onlyOneSearch,
    memberAndTree
  },
  created() {
    //初始化显示的列
    this.checkEffectListInit();
  },
  computed: {
    columnEffectState() {
      let arr = [],
        arr1 = this.textEffectData,
        arr2 = this.checkEffectList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    },
    batchIdStatus: function() {
      return this.batchId;
    },
    ruleNameStatus: function() {
      return this.ruleName;
    },
    

  },
  mounted() {
    this.searchEffectFunc()
  },
  methods: {
    //机构树方法
    treeBtn() {
      this.toShowMemberTree = true;
      this.dictCode = "OrganUnit";
      this.$nextTick(()=>{
        this.$refs.memberAndTree.init();
       })
    },
    searchBtn() {
        this.searchEffectForm.amount='';
        this.searchEffectForm.org='';
        this.searchEffectForm.yearId='';
        this.showValue='';
        this.searchDialog = true
    },
    //确定
    confirmTne() {
        this.searchEffectFunc()
        this.searchDialog = false
    },
    //取消
    cancelTne() {
        //this.searchDialog = false
        this.searchEffectForm.amount='';
        this.searchEffectForm.org='';
        this.searchEffectForm.yearId='';
        this.showValue='';
    },
    selectDataFunc(val) {
      this.toShowMemberTree = false
      if(val){
        let params = val;
        if (params.selectionFlag == "2") {
          this.showValue = params.row.dictItemName;
          this.searchEffectForm.org = params.row.dictItemCode;
        } else {
         if(params.row.name.length>7){
            this.showValue = params.row.name.substring(0,7)+"..."
         } else{
              this.showValue = params.row.name;
         }
         
          this.searchEffectForm.org = params.row.id;
        }
        
      }
    },
    checkEffectListInit() {
      this.checkEffectList = this.textEffectData.map(v => {
        return v.label;
      });
    },
    searchEffectFunc() {
      let data= {
        batchId:this.batchId,
        ...this.searchEffectForm
      }
      ruleResult.queryEffectDataPage(data).then(res => {
        if (res.code === 200) {
          this.tableEffectData = res.datas.rows;
          this.effectTotal = res.datas.total;
        }
      });
    },
    ruleNameFormatter() {
      return this.ruleName;
    },
    //点击行选中(运行结果首页)
    authorizeForEffectTable(row) {
      if (this.$refs.multipleEffectTable) {
          this.$refs.multipleEffectTable.clearSelection()
      }
      this.$refs.multipleEffectTable.toggleRowSelection(row, true)
    },
    handleEffectSizeChange(val) {
      this.searchEffectForm.size = val;
      console.log(val, "每页数");
      this.searchEffectFunc();
    },
    handleEffectCurrentChange(val) {
      this.searchEffectForm.page = val;
      console.log(val, "当前页");
      this.searchEffectFunc();
    }
  }
};
</script>

<style lang="scss" scoped>
.dialogSearchBox {
  header {
    text-align: center;
    span {
      margin: 0 20px;
    }
  }
}
.treeBoxBig {
  width: 180px;
  height: 32px;
  border: 1px solid #DCE0E6;
  border-radius: 4px;
  .treeBox {
    width: 140px;
    height: 32px;
    padding-left: 10px;
    line-height: 32px;
  }
  .treeBtnCS {
    background: url("~@/assets/images/popWindow_arrow.gif");
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    position: absolute;
    left: 156px;
    top: 8px;
    cursor: pointer;
  }
}
</style>